<template>
    <div>

      <el-container class="home-container">

      <el-header class="home-header">
        <i class="home_title" style="margin-right: 15px">北斗星后台管理系统</i>

        <!--下来菜单的组件@command="handleCommand"事件-->
        <el-dropdown @command="handleCommand">
	     <span class="el-dropdown-link">
	       {{this.$route.params.name}}<i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>
	     </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="a">个人信息</el-dropdown-item>
            <el-dropdown-item command="b">修改密码</el-dropdown-item>
            <el-dropdown-item command="c">退出系统</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>

      </el-header>



      <el-container>

        <el-aside width="200px">
          <!--<el-menu
            default-active="2"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b">
            <el-submenu index="1">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>导航一</span>
              </template>
              <el-menu-item-group>
                <template slot="title">分组一</template>
                <el-menu-item index="1-1" @click="test1">选项1</el-menu-item>
                <el-menu-item index="1-2">选项2</el-menu-item>
              </el-menu-item-group>
              <el-menu-item-group title="分组2">
                <el-menu-item index="1-3">选项3</el-menu-item>
              </el-menu-item-group>
              <el-submenu index="1-4">
                <template slot="title">选项4</template>
                <el-menu-item index="1-4-1">选项1</el-menu-item>
              </el-submenu>
            </el-submenu>
            <el-menu-item index="2">
              <i class="el-icon-menu"></i>
              <span slot="title">导航二</span>
            </el-menu-item>
            <el-menu-item index="3">
              <i class="el-icon-document"></i>
              <span slot="title">导航三</span>
            </el-menu-item>
            <el-menu-item index="4">
              <i class="el-icon-setting"></i>
              <span slot="title">导航四</span>
            </el-menu-item>
          </el-menu>-->


          <el-menu
            default-active="2"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b">

            <button @click="yyyy">888</button>

            <el-submenu :title="m1.menuName" v-for="(m1,mindex) in listMenu" :key="mindex"  :index="getIndex(m1.menuId)" >

              <template slot="title">
                <i :class=m1.imagePath></i>
                <span>{{m1.menuName}}</span>
              </template>

              <el-submenu v-for="(m2,m2Index) in m1.listMenu" :key="m2Index"  :index="getIndex(m2.menuId)">
                <template slot="title">{{m2.menuName}}</template>

                <el-menu-item  v-for="(m3,m3Index) in m2.listMenu" :key="m3Index" :index="getIndex(m3.menuId)">{{m3.menuName}}</el-menu-item>
              </el-submenu>

            </el-submenu>
          </el-menu>







        </el-aside>
        <el-container>

          <el-main>
            <div><router-view></router-view></div>
          </el-main>
          <el-footer>Footer</el-footer>
        </el-container>
      </el-container>
    </el-container>

    </div>
</template>

<script>
    import leftMenu from '@/view/menu/left-menu'

    export default {
        components:{leftMenu},
        name: "home",
        data(){
          return{
            userInfo: "",
            username:"",
            listMenu:[]
          }
        },
        created() {
          this.username=window.localStorage.getItem("userInfo");
          this.initMenu();
        },
      methods:{
          getUserInfo(){

          },
          handleOpen(key, keyPath) {
            console.log(key, keyPath);
          },
          handleClose(key, keyPath) {
            console.log(key, keyPath);
          },
          handleCommand(command) {
            if(command=='a'){
              this.$message('click on item 个人信息');
              this.detailUserDialog=true;
            }else if(command=='b'){
              this.$message('click on item 修改密码');
              this.PasswordDialog=true;
              this.Ypassword=this.$store.state.user.password;
              this.ruleForm.id=this.$store.state.user.id;
            }else if(command=='c'){
              this.$confirm('你是否要退出此系统尼?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                //数据还原
                this.$store.commit('login', {});
                //退出到登录界面
                this.$router.replace({
                  path: '/'
                });
                this.$message({
                  type: 'success',
                  message: '退出成功!'
                });

              }).catch(() => {
                this.$message({
                  type: 'info',
                  message: '取消退出'
                });
              });
            }
          },
          test1(){
            // alert("uuuu")
            this.$router.push("/uuu");
            console.log("jinrurouter")
          },
          handleOpen(key, keyPath) {
            console.log(key, keyPath);
          },
          handleClose(key, keyPath) {
            console.log(key, keyPath);
          },
          test1(){
            this.$router.push("/uuuu")
          },
          getIndex(code){
            return ""+code;
          },
          yyyy() {
            if (this.$data.isCollapse) {
              this.$data.isCollapse = false
            } else {
              this.$data.isCollapse = true
            }
          },
        initMenu() {
          this.$axios.post(this.$gloableData.serverPath + "/menulist1?loginName="+this.username).then((response) => {
            alert(response.data)
            this.listMenu=response.data;
          });
        }
        }

    }
</script>

<style>
  .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 90px;
  }

  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 680px;
  }

  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 560px;
  }

  body > .el-container {
    margin-bottom: 40px;
  }

  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 360px;
  }



  .home-container {
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
  }

  .home-header {
    background-color: #20a0ff;
    color: #333;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: content-box;
    padding: 0px;
  }
  .home_title{
    color: #333;;
    font-size: 22px;
    display: inline;
    margin-left: 8px;
  }

  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
</style>
